<template>
	<view class="page">
		<image class="bg-box" :src="imgurl + '/verfity.png'" mode="widthFix"></image>
		<view class="right-icon-box">
			<image @click="goToPage('/pages/user/writeoff/bill?type=1')" src="/static/images/shop/m10.png" mode=""></image>
			<image @click="goToPage('/pages/user/writeoff/rule')" src="/static/images/shop/m11.png" mode=""></image>
		</view>
		
		<view class="show-box">
			<view class="top-hrz-box">
				<view class="hrz-box">
					<view class="hrz-name">好人值</view>
					<view class="hrz-num">{{ user.haoren_number }}</view>
					<view class="hrz-desc">1好人值=1元</view>
				</view>
			</view>
			
			<div class="btm-code-img">
				<image class="code-img" :src="imgurl+'/api/user/haorenCode?uid='+user.id" mode=""></image>
				
				<view class="left-yuan"></view>
				<view class="right-yuan"></view>
			</div>
			
			
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				imgurl: this.$BASE_URL_YIYUAN
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			goToPage(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style scoped>
.page {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF !important;
	overflow-y: scroll;
}
.bg-box {
	width: 100%;
	height: 100%;
	position: absolute;
}
.right-icon-box {
	display: flex;
	align-items: center;
	position: absolute;
	top: 32rpx;
	right: 44rpx;
	z-index: 99;
}
.right-icon-box image{
	width: 38rpx;
	height: 38rpx;
	margin-left: 22rpx;
}
.show-box {
	width: 604rpx;
	height: 781rpx;
	background-color: white;
	border-radius: 10rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 146rpx;
	z-index: 99;
}
.top-hrz-box {
	padding: 46rpx 50rpx 0rpx;
}
.hrz-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: dashed 1rpx #E5E5E5;
	padding-bottom: 25rpx;
}
.hrz-name {
	font-size: 34rpx;
	color: #333333;
	line-height: 34rpx;
	font-weight: 500;
	margin-bottom: 35rpx;
}
.hrz-num {
	font-size: 60rpx;
	font-weight: bold;
	line-height: 60rpx;
	color: #FC6A4F;
	margin-bottom: 40rpx;
}
.hrz-desc {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
}
.btm-code-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 36rpx;
	position: relative;
}
.code-img {
	width: 446rpx;
	height: 447rpx;
}
.left-yuan {
	position:absolute;
	left: -25rpx;
	top: 80rpx;
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background: red;
	z-index: 999;
}
.right-yuan {
	position:absolute; 
	right: -25rpx;
	top: 80rpx;
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background: red;
	z-index: 999;
}
</style>
